import React from 'react'
import TodoButton from '../TodoButton/TodoButton'
import styles from './TodoModal.module.css'

/*
  Api 说明
  visible: 是否显示模态框
  title：标题
  children：内容
  onClose：点击取消按钮要执行的函数
  onConfirm:点击确认按钮要执行的函数
*/
// export default function TodoModal({ visible, title, children, onClose, onConfirm }) {

//   const closeModal = () => {
//     console.log('点击取消');
//     onClose && onClose();
//   }
//   const confirmModal = () => {
//     console.log('点击确认');
//     onConfirm && onConfirm();
//   }
//   return visible && (
//     <div className={styles.modal_wrap}>
//       <div className={styles.modal}>
//         <div className={styles.modal_title}>{title}</div>
//         <div className={styles.modal_content}>{children}</div>
//         <div className={styles.modal_footer}>
//           <TodoButton onClick={closeModal}>取消</TodoButton>
//           <TodoButton onClick={confirmModal}>确认</TodoButton>
//         </div>
//       </div>
//       <div className={styles.modal_mask} onClick={closeModal}></div>
//     </div>
//   )
// }

import NewPortal from './NewPortal'

export default function TodoModal({ visible, title, children, onClose, onConfirm }) {

  const closeModal = () => {
    console.log('点击取消');
    onClose && onClose();
  }
  const confirmModal = () => {
    console.log('点击确认');
    onConfirm && onConfirm();
  }
  return (
    <NewPortal visible={visible}>
      <div className={styles.modal_wrap}>
        <div className={styles.modal}>
          <div className={styles.modal_title}>{title}</div>
          <div className={styles.modal_content}>{children}</div>
          <div className={styles.modal_footer}>
            <TodoButton onClick={closeModal}>取消</TodoButton>
            <TodoButton onClick={confirmModal}>确认</TodoButton>
          </div>
        </div>
        <div className={styles.modal_mask} onClick={closeModal}></div>
      </div>
    </NewPortal>
  )
}